<template>
	<view>
		<view id="top" style="position: fixed; width: 100%;">
			<!-- 顶部导航 -->
			<view class="cu-bar bg-yellow text-black">
				<view class="action" @tap="BackPage">
					<text class="cuIcon-back  "></text>
				</view>

				<view class="action" style="font-size: 18px;font-weight: 500;">
					{{i18n.team.title}}
				</view>
				<view class="action text-bold">

				</view>
			</view>
			<view class="top-bg bg-yellow"></view>
			<view class=" bg-white" style="margin: -75px 16px 16px;border-radius: 9px;">
				<view class="flex  ">
					<view class="flex-sub padding-sm radius text-center">
						<text class="tit1 ">{{i18n.team.B2yest}}</text>
						<view class="tit2 ">{{info.gryj}}</view>

					</view>
					<view class="flex-sub padding-sm radius text-center">
						<text class="tit1 ">{{i18n.team.yxzt}}</text>
						<view class="tit2">{{info.ztnum}}</view>

					</view>
				</view>
				<view class="flex  ">

					<view class="flex-sub padding-sm radius text-center">
						<text class="tit1 ">{{i18n.team.tdnum}}</text>
						<view class="tit2 ">{{info.tdnum}}</view>

					</view>
					<view class="flex-sub padding-sm radius text-center">
						<text class="tit1 ">{{i18n.team.tdtotal}}</text>
						<view class="tit2 ">{{info.tdyj}}</view>

					</view>
				</view>
			</view>
			<!-- <view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<view class=" ">{{i18n.team.myzt}}</view>

				</view>
			</view> -->
			<!-- <view class="line"></view> -->
			<view class="flex padding-sm text-grey bg-white ">
				<view class="flex-sub text-left uni-h6">{{i18n.team.account}}</view>
				<view class="flex-sub text-center uni-h6">{{i18n.team.level}}</view>
				<view class="flex-sub text-right uni-h6">{{i18n.team.state}}</view>
			</view>
			<!-- <view class="line"></view> -->
		</view>

		<scroll-view class="panel-scroll-box" scroll-y="true" @scrolltolower="loadMore" :style="[{'top':top+'px','height':height+'px','position':'absolute'}]">
			<view class=" bg-white " v-for="(item, index) in tabItem.newsList" :key="index">
				<view class="flex padding-sm ">
					<view class="flex-twice     ">
						<view class="uni-flex uni-row  ">
							<view class="listtitle">{{i18n.team.regtime}}： {{item.addtime_text}}</view>
						</view>

					</view>
					<view class=" ">
						<view class="listtitle">{{item.gryj >0 ? i18n.team.state1 :i18n.team.state2}}</view>
					</view>

				</view>
				<view class="flex padding-sm">
					<view class="flex-twice  ">
						<view class="uni-flex uni-row  ">
							<view class="listtitle2"> {{item.mobile.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3")}}</view>
						</view>

					</view>
					<view class="flex-twice   ">
						<view class="text-center ">
							<view class="listtitle2">{{item.level_text}}</view>
						</view>
					</view>
					<view class="flex-twice ">

					</view>
				</view>
				<view class="line"></view>
			</view>
			<mix-load-more :status="tabItem.loadMoreStatus" style="margin-top: 40px;"></mix-load-more>
		</scroll-view>


		<view class="bottom bg-white">
			<view class="flex padding-sm ">
				<view class="flex-twice     ">
					<view class="uni-flex uni-row  ">
						<view class="uni-h5 text-black"> {{i18n.share.InvitationCode}}:</view>
						<view class="uni-h5 text-yellow margin-left-sm"> {{info.tgno}}</view>
					</view>

				</view>
				<view class=" ">
					<button class="cu-btn bg-yellow sm" @tap="copy">
						{{i18n.share.copy2}}
					</button>

				</view>

			</view>


			<view class="flex padding-xs">
				<view class="flex-sub padding-xs">
					<button class="cu-btn bg-yellow botton-b" @tap="copy2">{{i18n.share.copy}}</button>
				</view>
				<view class="flex-sub padding-xs">
					<button class="cu-btn botton-b" @tap="navTo('/pages/user/share')">{{i18n.share.InvitationCode}}</button>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';

	export default {
		data() {
			return {
				toggleDelay: false,
				uid: 1,
				info: {},
				top: 0,
				height: 0,
				tabItem: {
					name: '已取消',
					id: '3',
					newsList: [],
					loadMoreStatus: 0, //加载更多 0加载前，1加载中，2没有更多了
					refreshing: 0,
					page: 1,
				}
			}
		},
		components: {
			mixLoadMore,
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			hasLogin() {
				return this.userinfo.id ? true : false
			},
			i18n() {
				return this.$t('message');
			}
		},
		//    onLoad() {


		// }, 
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#top').boundingClientRect(data => {

				this.top = data.height+50;
				this.height = uni.getSystemInfoSync().screenHeight - data.height - 120;
			}).exec();
		},
		onShow() {
			this.toggleDelay = true
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			}
			this.uid = this.userinfo.id;
			uni.setNavigationBarTitle({
				title: this.i18n.team.title
			});
			this.init()
		},
		methods: {
			init() {
				// this.$http.post('index.myzt', {
				// 	uid: this.uid
				// }).then(res => {
				// 	console.log(res)
				// 	this.info = res.data.info;
				// });
				this.tabItem.page = 1;
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore() {
				console.log(666)
				this.loadNewsList('add');
			},
			//列表
			loadNewsList(type) {

				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (this.tabItem.loadMoreStatus === 2) {
						return;
					}
					this.tabItem.loadMoreStatus = 1;
				}
				// #ifdef APP-PLUS
				else if (type === 'refresh') {
					this.tabItem.refreshing = true;
				}
				// #endif

				if (type === 'refresh') {
					this.tabItem.page = 1;
				}
				// 请求数据
				let send = {
					uid: this.uid,
					page: this.tabItem.page
				};
				this.$http.post('index.myzt', send).then(res => {
					this.info = res.data.info;
					let info = res.data.zt;
					let list = info.data;
					if (type === 'refresh') {
						this.tabItem.newsList = []; //刷新前清空数组
						//下拉刷新 关闭刷新动画
						this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
						// #ifdef APP-PLUS
						this.tabItem.refreshing = false;
						// #endif
						this.tabItem.loadMoreStatus = 0;
					}
					list.forEach(item => {
						// item.id = parseInt(Math.random() * 10000);
						this.tabItem.newsList.push(item);
					})

					this.tabItem.loadMoreStatus = info.current_page >= info.last_page ? 2 : 0;
					this.tabItem.page += 1;
				})

			},
			go(id) {
				uni.navigateTo({
					url: `/pages/user/child/team?uid=` + id
				})
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
				// uni.switchTab({
				// 	url: '/pages/user/user'
				// })
			},
			navTo(url) {
				if (!this.userinfo.id) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
			copy() {
				// #ifdef H5
				console.log('h5-copy')
				this.copyTitle(this.userinfo.tgno);
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: this.userinfo.tgno,
					success: () => {

						this.$api.msg(this.i18n.popup.success)
					}
				});
				// #endif

			},
			copy2() {
				let cc = this.$host + 'index.html#/pages/public/registe?tgno=' + this.userinfo.tgno;
				// #ifdef H5
				console.log('h5-copy')
				this.copyTitle(cc);
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: cc,
					success: () => {

						this.$api.msg(this.i18n.popup.success)
					}
				});
				// #endif

			},
			copyTitle(txt) {
				var input = document.createElement("input"); // 创建一个新input标签
				input.setAttribute("readonly", "readonly"); // 设置input标签只读属性
				input.setAttribute("value", txt); // 设置input value值为需要复制的内容
				document.body.appendChild(input); // 添加input标签到页面
				input.select(); // 选中input内容
				input.setSelectionRange(0, 9999); // 设置选中input内容范围
				document.execCommand("copy"); // 复制
				document.body.removeChild(input); // 删除新创建的input标签
				// 只是提示作用。
				this.$api.msg(this.i18n.popup.success)
			},
			yq() {
				if (this.myconfig.vip_tui > this.userinfo.wall2) {
					this.$api.msg(this.i18n.team.err1);
					return false
				}

				uni.navigateTo({
					url: `/pages/user/share`
				})
			}
		}
	}
</script>

<style lang='scss'>
	.panel-scroll-box {
		/* height: 100%; */
		height: 600px;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	image {
		display: inline-block;
		width: 120upx;
		height: 120upx;
		margin: 5upx;
		border-radius: 30upx;
	}


	.top-bg {
		width: 100%;
		height: 80px;
		/* background: #FCC652; */

	}

	

	.ccb {
		width: 59px;
		height: 22px;
		background: #3D3D3D;
		border-radius: 4px;
		font-size: 11px;
		color: #FCC652;
		padding: 0px;
	}

	.bottom {

		position: absolute;
		bottom: 0px;
		width: 100%;
	}

	.listtitle {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 18px;
		color: #9aa4ad;
	}
	
	.listtitle2 {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 22px;
		color: #858585;
	}
</style>
